<template>
  <div class="showBox">
    <div class="head">
      <el-button size="mini" type="primary" round  @click="handleAdd('添加')">添加</el-button>
    </div>

    <div class="table">
      <el-table :data="tableData" height="100%" v-loading="loadings">
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column label="类型编号" prop="typeCode" align="center"></el-table-column>
        <el-table-column label="类型名称" prop="typeName" align="center"></el-table-column>
        <el-table-column label="状态" prop="state" align="center">
          <template slot-scope="scope">
            {{scope.row.state?'启用':'关闭'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" align="center">
             <template slot-scope="scope">
                <el-button size="mini"  type="primary" round @click="handleUpdate(scope.row, '修改')">修改</el-button>
                <el-button size="mini" type="danger"  round style="margin-left: 5px" @click="handleDeleteDeviceType(scope.row)">删除</el-button>
                <el-button size="mini"  plain round style="margin-left: 5px" @click="open(scope.row)">{{scope.row.state?'停用':'启用'}}</el-button>
              </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="paging">
      <el-pagination
        @size-change="SizeChange"
        @current-change="CurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="1"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >

      </el-pagination>
    </div>

    <el-dialog
      :title="`${title}设备类型维护项`"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      >
      <el-form class="smartShopDialogForm" :model="addObj" label-position="right" label-width="90px">
        <el-form-item  label="设备类型编号">
          <el-input size="small" v-model="addObj.typeCode"></el-input>
        </el-form-item>
        <el-form-item  label="设备类型名称">
          <el-input size="small" v-model="addObj.typeName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()" round size="small">取 消</el-button>
        <el-button type="primary" round @click="Save" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {queryAllType, addDeviceType, deleteDeviceType, updateDeviceType, updateDeviceTypeState} from '@/api/deviceManage'
export default {
  components: {},
  props: {},
  data() {
    return {
      title: '',
      loadings: true,
      tableData:[],
      pageSize:10,
      currentPage:1,
      total:0,
      dialogVisible:false,
      addObj:{}
    };
  },
  watch: {},
  computed: {},
  methods: {
    //修改设备类型状态
    async open(row){
      this.loadings=true;
      let  {code} = await updateDeviceTypeState({
        typeUuid: row.typeUuid
      })
      if(code === 1) {
          this.loadings=false;
          row.state=row.state?0:1;
          this.$message({
          type: 'success',
          message: '操作成功!'
        });
        return
      }
      this.loadings=false;
      this.$message({
        type: 'error',
        message: '操作失败!'
      });
    },
    //添加设备类型
    handleAdd(title) {
      this.dialogVisible=true
      this.title = title
    },
    //修改设备类型
    handleUpdate(row,title) {
        this.dialogVisible=true
        this.addObj = Object.assign({},row)
        this.title = title
    },
    //删除设备类型
    handleDeleteDeviceType(row) {
       this.loadings = true
       this.$confirm('是否确认删除此设备类型', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
         roundButton: true,
          type: 'warning'
        }).then(async () => {
            let data = await deleteDeviceType({
            typeUuid: row.typeUuid
          })
          if(data.code === 1) {
              this.$message({
              type: 'success',
              message: '删除成功!'
            })
              this.getData();
              return
          }
          this.loadings = false
        }).catch(() => {
           this.loadings = false
        })
    },
     //关闭编辑窗口
    handleClose() {
        this.dialogVisible=false
        this.addObj = {}
    },
      SizeChange(size){
        this.pageSize=size;
        this.getData();
      },
    CurrentChange(current){
        this.currentPage=current;
        this.getData()
      },
   async getData() {
     let data = await queryAllType({
        size:this.pageSize,
        current:this.currentPage,
     });
     if (data.code === 1) {
        this.tableData = !!data.records ? data.records : []
        this.total = data.total
        this.loadings = false
     }
   },
    async Save(){
        let data =this.title === '添加' ? await addDeviceType(this.addObj) : await updateDeviceType({...this.addObj})
        if(data.code === 1) {
        this.$message({
          type: 'success',
          message: data.message
        })
        this.dialogVisible=false
        this.addObj = {}
        this.getData()
          return
        }
      this.$message({
        type: 'error',
        message: data.message
      })
    }
  },
  created() {
    console.log(this.$route.path);
  },
  mounted() {
    this.getData()
  }
};
</script>
<style lang="scss" scoped>
.showBox{
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .head{
    height: 50px;
    width: 100%;
    line-height: 50px;
    border-bottom: 1px solid #DCDFE6;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .table{
    width: 100%;
    height: calc(100% - 80px);
    box-sizing: border-box;
    padding: 10px 0;
  }

  .paging{
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .el-dialog {
    .item{
      height: 50px;
      width: 100%;
      line-height: 50px;

      p{
        width: 100px;
        float: left;
      }

      .el-input{
        width: calc(100% - 100px);
        float: right;
      }
    }

    .el-dialog__body{
      padding: 30px 30px 30px;
    }
  }
}
</style>
